<template>
  <vxe-modal
    :zIndex="2001"
    :size="size"
    v-model="visible"
    :title="title"
    :width="width"
    :height="height"
    :resize="resize"
    :loading="loading"
    :mask="mask"
    :padding="padding"
    :show-footer="showFooter"
    :show-zoom="showZoom"
    esc-closable
    @confirm="onConfirm"
    @cancel="onCancel"
  >
    <!-- 标题 -->
    <template #title>
      <slot name="title">{{ title }}</slot>
    </template>
    <!-- 默认插槽 -->
    <slot />
    <!-- 底部 -->
    <template #footer>
      <slot name="footer">
        <el-button @click="onCancel" v-if="showCancelButton">取消</el-button>
        <el-button type="primary" @click="onConfirm" v-if="showConfirmButton">确认</el-button>
      </slot>
    </template>
  </vxe-modal>
</template>

<script setup>
const props = defineProps({
  size: { type: String, default: 'mini' },
  modelValue: { type: Boolean, default: false },
  title: { type: String, default: '提示' },
  width: { type: [Number, String], default: 600 },
  height: { type: [Number, String], default: '60vh' },
  padding: { type: Boolean, default: true },
  resize: { type: Boolean, default: true },
  loading: { type: Boolean, default: true },
  mask: { type: Boolean, default: true },
  showFooter: { type: Boolean, default: true },
  showConfirmButton: { type: Boolean, default: true },
  showCancelButton: { type: Boolean, default: true },
  showZoom: { type: Boolean, default: true },
  confirmButtonText: { type: String, default: '确认' },
  cancelButtonText: { type: String, default: '取消' }
});
const emits = defineEmits(['update:modelValue', 'confirm', 'cancel']);
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val)
});
const onConfirm = () => emits('confirm');
const onCancel = () => emits('cancel');
const beforeHideMethod = () => {
  // 模拟异步
  // loading.value = true
  // return new Promise((resolve, reject) => {
  //   setTimeout(() => {
  //     loading.value = false
  //     VxeUI.modal.confirm('您确定要关闭吗？').then(type => {
  //       if (type === 'confirm') {
  //         VxeUI.modal.message({
  //           content: `允许关闭 ${type}`,
  //           status: 'success'
  //         })
  //         resolve(null)
  //       } else {
  //         VxeUI.modal.message({
  //           content: `禁止关闭 ${type}`,
  //           status: 'error'
  //         })
  //         // 返回 Error 禁止关闭
  //         reject(new Error())
  //       }
  //     })
  //   }, 300)
  // })
};
</script>
